<template>
	<view class="pagesKf pagesPadding">
		<!-- <u--image :showLoading="true" src="/static/images/index/kfIcon.png" width="60rpx" height="60rpx"
			@click="openPopup"></u--image>

		<u-popup :show="showPopup" round='16' mode="center" @close="closePopup" closeable>
			<view class="popupBox">
				<view class="popupBoxContent">
					<view class="imgItem" v-for="(item,index) in imageList" :key="index">
						<u--image :showLoading="true" :src="item" width="400rpx" height="600rpx"
							@click="previewImage(item)"></u--image>
						<view class="" v-if="imagePhoneList[index]">
							客服电话:
							<text class="red" @click="callPhone(imagePhoneList[index])">{{ imagePhoneList[index] }}</text>
							
						</view>
					</view>
				</view>
			</view>
		</u-popup> -->
		<view class="pagesKfContent">
			<view class="imgItem" v-for="(item,index) in imageList" :key="index">
				
				<u--image :showLoading="true" :src="item" width="400rpx" height="600rpx"
					@click="previewImage(item)"></u--image>
				<view class="" v-if="imagePhoneList[index]">
					客服电话:
					<text class="red" @click="callPhone(imagePhoneList[index])">{{ imagePhoneList[index] }}</text>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findAllFrontHomePage
	} from '@/api/platform/FrontHomePage.js'
	export default {
		name: "pagesKf",
		data() {
			return {
				indexManageInfo: {},
				imageList: [],
				imagePhoneList: [],
				imageIndex: 0,
				showPopup: false,
			};
		},
		created() {
			this.findAllFrontHomePage()
		},
		methods: {
			closePopup() {
				this.showPopup = false
				this.$emit('handleKfSticky',true)
			},
			openPopup() {
				this.showPopup = true
				this.$emit('handleKfSticky',false)
			},
			callPhone(str) {
				uni.makePhoneCall({
					phoneNumber: str //仅为示例
				});
			},
			previewImage(item){
				uni.previewImage({
					current: item, // 当前显示的图片链接
					urls: this.imageList// 需要预览的图片链接列表
				});
			},
			findAllFrontHomePage() {
				findAllFrontHomePage().then(res => {
					if (res.code == 200) {
						console.log('this.indexManageInfo', this.indexManageInfo)
						this.indexManageInfo = res.data[0]
						let frontPhone = []
						if (this.indexManageInfo.frontPhone) {
							frontPhone = this.indexManageInfo.frontPhone.split(',')
						}
						if (this.indexManageInfo.articleImages) {
							this.imageList = this.indexManageInfo.articleImages.split(',')
							let data = this.imageList
							let dataArr = []
							data.forEach((it, index) => {
								if (frontPhone[index]) {
									dataArr.push(frontPhone[index])
								} else {
									dataArr.push('')
								}
							})
							this.imagePhoneList = dataArr

						} else {
							this.imageList = []
							this.imagePhoneList = []
							this.$emit('closeKf')
						}


					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesKf {
		.popupBox {
			padding: 80rpx 24rpx 24rpx;

			.popupBoxContent {
				background: #E4F1FF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #3898FF;
				padding: 24rpx;
				height: 700rpx;
				overflow: auto;
				.imgItem{
					text-align: center;
					color: #000;
					// font-size: 30rpx;
					margin-bottom: 10rpx;
					.red{
						color: red;
						font-weight: bold;
						margin-left: 20rpx;
						font-size: 30rpx;
					}
				}
			}
		}
		.pagesKfContent{
			display: flex;
			overflow: scroll;
			.imgItem{
				// margin: 0 auto;
				text-align: center;
				color: #000;
				font-size: 30rpx;
				margin-bottom: 10rpx;
				margin-right: 20rpx;
				.red{
					color: red;
					font-weight: bold;
					margin-left: 20rpx;
					font-size: 30rpx;
				}
			}
		}
		
		
	}
</style>